<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 会员设置 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="svip-create-card" v-if="listData.length == 0">
            <div class="text">
                <p>创建会员卡并设置会员权益</p>
                <p>通过核心粉丝提高用户粘性，扩大商家品牌影响力。</p>
            </div>
            <button @click="createCard" class="svip-button black-gloden" style="width: 150px">创建会员卡</button>
        </div>
        <div class="page" v-if="listData.length > 0">
            <el-button type="primary" class="handle-del mr10" @click="addDialog">新增会员卡</el-button>
            <section class="member-type-section">
                <div class="member-card-list-section row clearfix">
                    <div class="member-config-item card" v-for="(item, index) in listData" :key="index">
                        <div class="member-title">{{ item.title }} 会员卡</div>
                        <div class="member-card-box">
                            <div class="member-card-bg" style="background-color: #333">
                                <img :src="item.card_bg" alt="" />
                            </div>
                            <div class="member-card-info">
                                <div class="title clearfix">
                                    <div class="member-card-logo">                                       
                                        <img :src="item.cover" @error="tabErrorPicture(item.id)" alt="" v-if="item.cover" />
                                        <img :src="errorProduct" alt="" v-else />
                                    </div>
                                    <div class="member-card-title" style="color: white">{{ item.title }}</div>
                                </div>
                                <div class="member-description" style="color: white">{{ item.description }}</div>
                            </div>
                        </div>
                        <div class="member-price-box">
                            <div v-if="item.month_price > 0" class="price">￥ {{ item.month_price }} 元/月</div>
                            <div v-if="item.quarter_price > 0" class="price">￥ {{ item.quarter_price }} 元/季度</div>
                            <div v-if="item.year_price > 0" class="price">￥ {{ item.year_price }} 元/年</div>
                            <div v-if="item.forever_price > 0" class="price">￥ {{ item.forever_price }} 元/永久</div>
                        </div>
                        <div class="member-content-box">
                            <h3>雪鲸</h3>
                            <p>欢迎使用雪鲸。</p>
                        </div>
                        <div class="action">
                            <el-row>
                                <el-button @click="preview(item.id, item.title)" type="primary" size="mini">预览</el-button>
                                <el-button @click="edit(item.id, item)" type="success" size="mini">修改会员卡配置</el-button>
                                <el-button @click="disable(item.id, item.status)" type="warning" size="mini">{{
                                    item.status == 0 ? '已禁用' : '已启用'
                                }}</el-button>
                                <!-- <el-button @click="deleteRow(index)" type="danger" size="mini">删除</el-button> -->
                            </el-row>
                        </div>
                    </div>
                </div>
            </section>
        </div>
        <!-- 新增会员卡弹出框 -->
        <el-dialog title="新增/编辑会员卡" @close="cancel" :visible.sync="showDialog" width="30%">
            <el-form ref="form" :model="form" label-width="100px">
                <el-form-item label="会员卡名称">
                    <el-input v-model="form.title"></el-input>
                </el-form-item>
                <el-form-item label="会员卡描述">
                    <el-input v-model="form.description"> </el-input>
                </el-form-item>
                <el-form-item label="会员卡图标">
                    <div class="avatar-uploader" @click="showUploadImage('membericon')">
						<img v-if="form.cover" :src="form.cover" class="avatar" height="200px">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</div>
					<div class="el-upload__tip">建议尺寸：128*128px</div>
                </el-form-item>
                <el-form-item label="会员卡背景图">
                    <div class="avatar-uploader" @click="showUploadImage('memberimage')">
						<img v-if="form.card_bg" :src="form.card_bg" class="avatar" height="200px">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</div>
					<div class="el-upload__tip">建议尺寸：768*485px</div>
                </el-form-item>
                <el-form-item label="会员卡价格">
                    <div>（月费）<el-input v-model="form.month_price" class="ml10"></el-input><span>元</span></div>
                    <div>（季费）<el-input v-model="form.quarter_price" class="ml10"></el-input><span>元</span></div>
                    <div>（年费）<el-input v-model="form.year_price" class="ml10"></el-input><span>元</span></div>
                    <div>（永久）<el-input v-model="form.forever_price" class="ml10"></el-input><span>元</span></div>
                    <div>
                        （折扣）<el-input v-model="form.discount" placeholder="输入0-10对应折扣值：如 8.5" class="ml10"></el-input
                        ><span>折</span>
                    </div>
                </el-form-item>
                <el-form-item label="会员权益详情">
                    <el-input type="textarea" :rows="3" v-model="form.content"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-radio-group v-model="form.status">
                        <el-radio :label="1">启用</el-radio>
                        <el-radio :label="0">禁用</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 预览弹出框 -->
        <el-dialog :title="title" :visible.sync="previewDialogVisible" width="30%">
            <div class="preview">
                <h3>微信扫码预览</h3>
                <qriously class="qrCode" :value="preview_url" :size="200" :backgroundAlpha="1" />
                <el-input v-model="preview_url">
                    <template slot="prepend">SPA版url</template>
                    <el-button
                        v-clipboard="copy_value"
                        v-clipboard:success="clipboardSuccessHandler"
                        v-clipboard:error="clipboardErrorHandler"
                        slot="append"
                        >复制</el-button
                    >
                </el-input>
            </div>
        </el-dialog>
        <uploadimage ref="uploadimagecom" v-on:childByImageValue="childByImageValue"></uploadimage>
    </div>
</template>

<script>
import { memberSetListData, addMemberCardData } from '../../api/index';
import uploadimage from '@/components/common/uploadimage.vue';
export default {
    components: {
		uploadimage
	},
    data() {
        return {
            listData: [],
            showDialog: false,
            title: '',
            preview_url: '',
            copy_value: '',
            previewDialogVisible: false,
            form: {
                id: '',
                title: '',
                description: '',
                cover: '',
                card_bg: '',
                month_price: '',
                quarter_price: '',
                year_price: '',
                forever_price: '',
                discount: '',
                content: '',
                status: 1
            },
            errorProduct: require('@/assets/img/noProduct.jpg'), 
        };
    },
    created() {
        this.getData();
    },
    methods: {
        tabErrorPicture(id){    // 表格图文封面默认展示图
            let i = this.listData.findIndex(v => v.id == id);
			this.listData[i].cover = this.errorProduct;
        },
        getData() {
            memberSetListData().then((res) => {
                this.listData = res.data.list;
            });
        },
        createCard() {
            this.showDialog = true;
        },
        // 新增
        addDialog() {
            this.form={
                id: '',
                title: '',
                description: '',
                cover: '',
                card_bg: '',
                month_price: '',
                quarter_price: '',
                year_price: '',
                forever_price: '',
                discount: '',
                content: '',
                status: 1
            }
            this.showDialog = true;
        },
        // 预览
        preview(id, title) {
            this.previewDialogVisible = true;
            this.title = title;
            this.copy_value =
                this.preview_url = `http://www.xuejing.pro/addons/muu_classroom/h5/?i=1#/muu_classroom/pages/member/detail?id=${id}`;
        },
        clipboardSuccessHandler({ value, event }) {
            this.$message.success('复制成功');
        },
        clipboardErrorHandler({ value, event }) {
            console.log('复制失败', value);
        },
        // 编辑
        edit(id, row) {
            this.showDialog = true;
            this.form = row;
            this.form.id = id;
        },
        //禁用
        disable(id, status) {
            this.$confirm(`确定${status == 0 ? '启用' : '禁用'}吗！`, '提示', {
                type: 'warning'
            }).then(() => {
                addMemberCardData({ id: id, status: status == 0 ? 1 : 0 }).then((res) => {
                    if (res.code == 1) {
                        this.$message.success('成功');
                        setTimeout(() => {
                              this.getData();
                            //location.reload();
                        }, 200);
                    }
                });
            });
        },
        // 删除
        // deleteRow(index) {},
        //取消
        cancel() {
            this.showDialog = false;
        },
        //确定
        save() {
            addMemberCardData(this.form).then((res) => {
                if (res.code == 1) {
                    this.showDialog = false;
                    this.$message.success('操作成功');
                    setTimeout(() => {
                        this.getData();
                        //location.reload();
                    }, 200);
                }
            });
        },
        showUploadImage(action) { //显示上传组件
			this.$refs.uploadimagecom.dialogVisible = true;
			this.action = action;
		},
        //确认按钮传值过来并赋值到form表单上
		childByImageValue: function (childValue) {
			if (this.action == "membericon") {
				this.form.cover = childValue;
			} else if (this.action == "memberimage") {
				this.form.card_bg = childValue;
			}
		},
    }
};
</script>

<style scoped>
@import '~@/components/common/css/common.css';

.svip-create-card {
    position: relative;
    height: 228px;
    margin: 200px;
    /* background-color: #f8f8f8; */
    text-align: center;
    overflow: hidden;
    background-size: cover;
    background-position: 50%;
}
.svip-create-card .text {
    margin: 64px 0 20px 0;
    font-size: 14px;
    color: #333;
}
.svip-create-card .text p {
    margin: 0;
    line-height: 20px;
}
.svip-button {
    height: 36px;
    padding: 0;
    outline: none;
    cursor: pointer;
}
.black-gloden {
    border-radius: 2px;
    border: 0;
    font-size: 14px;
    background-color: #333;
    color: #f1dba2;
}
.ml10 {
    width: 250px;
    margin: 10px 10px 0 10px;
}

/* 会员卡 */
.page {
    margin: 30px 0 0 30px;
}
.row {
    margin-right: -10px;
    margin-left: -10px;
}
.member-type-section .member-config-item {
    width: 400px;
    float: left;
    margin: 30px 10px;
}
.card {
    box-shadow: 0 0 20px rgb(0 0 0 / 8%);
    background-color: #fff;
    border-radius: 5px;
    border: none;
    position: relative;
    margin-bottom: 30px;
}
.member-type-section .member-config-item .member-title {
    font-size: 18px;
    padding: 15px;
}
.member-type-section .member-config-item .member-card-box {
    position: relative;
    background-color: #fff;
    margin: 5px 15px;
    height: 250px;
}
.member-type-section .member-config-item .member-card-box .member-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    border-radius: 15px;
    overflow: hidden;
}
.member-type-section .member-config-item .member-card-box .member-card-bg img {
    width: 100%;
    height: 100%;
    display: block;
}
.member-type-section .member-config-item .member-card-box .member-card-info {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: auto;
    padding: 15px 15px 10%;
    display: block;
    border-radius: 20px;
    z-index: 2;
}
.member-type-section .member-config-item .member-card-box .member-card-info .title {
    color: #d9b68b;
}
.member-type-section .member-config-item .member-card-box .member-card-info .title .member-card-logo {
    float: left;
    width: 36px;
    height: 36px;
    border-radius: 5px;
    overflow: hidden;
}
.member-type-section .member-config-item .member-card-box .member-card-info .title .member-card-logo img{
    display: block;
    width: 100%;
}
.member-type-section .member-config-item .member-card-box .member-card-info .title .member-card-title {
    margin-left: 46px;
    line-height: 36px;
}
/* .member-type-section .member-config-item .member-card-box .member-card-info .member-type {
    text-align: left;
    font-size: 36px;
    margin-top: 20px;
} */
.member-type-section .member-config-item .member-card-box .member-card-info .member-description {
    margin-top: 10px;
    font-size: 12px;
    line-height: 18px;
    height: 36px;
    color: #d9b68b;
    overflow: hidden;
    text-overflow: ellipsis;
}
.member-type-section .member-config-item .member-price-box {
    height: 166px;
    margin: 10px 0;
    padding: 5px 15px;
    background-color: #fff;
}
.member-type-section .member-config-item .member-price-box .price {
    padding: 0 15px;
    margin-top: 5px;
    border-radius: 5px;
    border: 1px solid #eee;
    background-color: #eee;
    line-height: 32px;
}
.member-type-section .member-content-box {
    margin-top: 5px;
    padding: 5px 15px;
    background-color: #fff;
    margin-bottom: 10px;
}
.action {
    margin: 30px 0 10px 0;
    text-align: center;
}
.preview {
    padding: 30px;
    text-align: center;
}
.preview .qrCode {
    margin: 10px 0;
}

.avatar-uploader {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	width: 375px !important;
	text-align: center;
}

.avatar-uploader:hover {
	border-color: #409EFF;
}

.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	line-height: 178px;
}

.avatar {
	width: 100%;
	display: block;
}
</style>

<style>
.el-input-group__append {
    background: #e6a23c;
}
.el-input-group__append span {
    color: #fff;
}
</style>